<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>农业视频</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <!-- <link href="../css/iOS/mobile/mobile.css" rel="stylesheet"> -->
</head>

<body>
    <!-- header -->
    <div>
        <div class="widget-default">
            <div class="farming-tab border1">
                <div id="segmentedControl" class="mui-segmented-control">
                    <a class="mui-control-item mui-active" href="#item1">关注</a>
                    <a class="mui-control-item" href="#item2">推荐</a>
                    <a class="mui-control-item" href="#item3">农技视频</a>
                    <a class="mui-control-item" href="#item4">小视频</a>
                </div>
            </div>
        </div>

        <!-- 关注 -->
        <div id="item1" class="margin-t-60 margin-b-60 mui-control-content mui-active">
            <div class="margin-b-10">
                <div class="widget-body widget-default margin-b-1 padding-b-10">
                    <div class="display-flex">
                        <div class="trade-list">
                            <div class="video-shade2"></div>
                            <div class="position-open2">
                                <img class="open-img1" src="../img/open.png" alt="">
                            </div>
                            <img class="left-img1" src="../img/video-bg.png" alt="">
                        </div>
                        <div class="display-flex flex-column justify-content-between margin-l-10 width-100">
                            <p class="black font-16 elli1">关于苹果生长的过程</p>
                            <div class="display-flex align-items-center justify-content-between">
                                <div class="display-flex align-items-center">
                                    <img class="tips-img" src="../img/tips.png" alt="">
                                    <span class="font-12 red">网络异常，发布失败</span>
                                </div>
                                <div class="display-flex gray3 font-12">
                                    <span class="margin-r-10">重试</span>
                                    <span>删除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-body widget-default margin-b-1 padding-b-5">
                    <div class="display-flex">
                        <div class="trade-list">
                            <div class="video-shade2"></div>
                            <div class="position-open2">
                                <img class="open-img1" src="../img/open.png" alt="">
                            </div>
                            <img class="left-img1" src="../img/video-bg.png" alt="">
                        </div>
                        <div class="display-flex flex-column justify-content-between margin-l-10 width-100">
                            <p class="black font-16 elli1">关于苹果生长的过程</p>
                            <div class="display-flex align-items-center justify-content-between">

                                <span class="font-12 gray">发送中...</span>

                                <span class="gray3 font-12">取消</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="demo1" class="mui-progressbar mui-progressbar-danger">
                    <span></span>
                </div>
            </div>

            <div class="mui-scroll-wrapper diff-scroll">
                <div class="mui-scroll display-flex">
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">已关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">互相关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="free-box margin-b-10"></div>
            <!-- <div class="widget-body widget-default display-flex index-overflow margin-b-10">
                <div class="display-flex">
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">已关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">互相关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">已关注</a>
                        </div>
                    </div>


                </div>
            </div> -->
            <!-- 视频列表 -->
            <div class="widget-body widget-default margin-b-5 padding-t-158">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>
            <div class="widget-body widget-default margin-b-5">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>

        </div>
        <!-- 推荐 -->
        <div id="item2" class="margin-t-60 mui-control-content margin-b-60">
            <!-- 视频列表 -->
            <div class="widget-body widget-default margin-b-5">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>
            <div class="widget-body widget-default margin-b-5">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>
        </div>
        <!-- 农技视频 -->
        <div id="item3" class="margin-t-60 mui-control-content margin-b-60">
            <div class="display-flex farm-fixed widget-default">
                <div class="farming2-tab">
                    <div
                        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <a class="mui-control-item mui-active">
                                种植业
                            </a>
                            <a class="mui-control-item">
                                养殖业
                            </a>
                            <a class="mui-control-item">
                                国家政策
                            </a>
                            <a class="mui-control-item">
                                经营管理
                            </a>
                            <a class="mui-control-item">
                                养殖业
                            </a>
                            <a class="mui-control-item">
                                国家政策
                            </a>
                            <a class="mui-control-item">
                                种植业
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-right display-flex align-items-center justify-content-center">
                    <img class="farm-icon1" src="../img/menu.png" alt="">
                </div>

            </div>

            <!-- 视频列表 -->
            <div class="widget-body widget-default margin-b-5 margin-t-110">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>
            <div class="widget-body widget-default margin-b-5">
                <div class="display-flex padding-b-10">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="display-flex flex-column justify-content-between margin-l-10">
                        <span class="elli1 font-weight black font-16 font-weight no-margin">江铃</span>
                        <span class="gray font-12">2019-10-21</span>
                    </div>
                </div>
                <div class="margin-t-5 trade-list">
                    <div class="video-shade1"></div>
                    <div class="position-open1">
                        <img class="open-img" src="../img/open.png" alt="">
                    </div>
                    <!-- <video width="100%" height="177" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video> -->
                    <div class="height177 width-100">
                        <img class="height177 width-100" src="../img/a.png" alt="">
                    </div>
                    <p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">
                        苹果的栽培技术苹果的栽培技术苹果的的栽培技术苹果的栽培技术的栽培技术苹果的栽培技术</p>
                </div>
                <div class="display-flex justify-content-end align-items-center padding-t-6">
                    <img class="farm-icon" src="../img/new-expert/info.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/new-expert/share.png" alt="">
                    <span class="gray font-12 padding-l-5 padding-r-10">10</span>
                    <img class="farm-icon" src="../img/zai.png" alt="">
                    <span class="gray font-12 padding-l-5">10</span>
                </div>
            </div>
        </div>
        <!-- 小视频 -->
        <div id="item4" class="margin-t-60 mui-control-content margin-b-60">
            <div class="display-flex farm-fixed widget-default">
                <div class="farming2-tab">
                    <div
                        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <a class="mui-control-item mui-active">
                                种植业
                            </a>
                            <a class="mui-control-item">
                                养殖业
                            </a>
                            <a class="mui-control-item">
                                国家政策
                            </a>
                            <a class="mui-control-item">
                                经营管理
                            </a>
                            <a class="mui-control-item">
                                养殖业
                            </a>
                            <a class="mui-control-item">
                                国家政策
                            </a>
                            <a class="mui-control-item">
                                种植业
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-right display-flex align-items-center justify-content-center">
                    <img class="farm-icon1" src="../img/menu.png" alt="">
                </div>

            </div>
            <!-- 视频列表 -->
            <div class="display-flex flex-warp margin-t-110">
                <div class="littlevideo-box">
                    <!-- <video width="100%" height="254" controls autoplay>
                                    <source src="../text.mp4" type="video/ogg" />
                                    您的浏览器不支持Video标签。
                                </video> -->
                    <img src="../img/video-bg.png" alt="" class="littlevideo-img">
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>
                <div class="littlevideo-box">
                    <!-- <video width="100%" height="254" controls autoplay>
                                    <source src="../text.mp4" type="video/ogg" />
                                    您的浏览器不支持Video标签。
                                </video> -->
                    <img src="../img/video-bg.png" alt="" class="littlevideo-img">
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>
                <div class="littlevideo-box">
                    <video width="100%" height="254" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video>
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>
                <div class="littlevideo-box">
                    <video width="100%" height="254" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video>
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>
                <div class="littlevideo-box">
                    <video width="100%" height="254" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video>
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>
                <div class="littlevideo-box">
                    <video width="100%" height="254" controls autoplay>
                        <source src="../text.mp4" type="video/ogg" />
                        您的浏览器不支持Video标签。
                    </video>
                    <div class="littlevideo-shade">
                        <p class="elli2 white font-12">柠檬大棚养殖技术柠檬大棚养殖 技术柠檬大棚养殖技术柠术柠檬大棚养殖技术柠檬大棚养殖技</p>
                        <p class="white font-12">700次<span class="padding-l-10">播放</span></p>
                    </div>
                </div>



            </div>


        </div>
    </div>
    <div class="hobby-footer1 bg-transparent">
        <div class="display-flex align-items-center bot-issue" id="imgpop">
            <img class="issue-img" src="../img/issue.png" alt="">
        </div>
    </div>
    <div id="topProp" class="topProp"></div>
    <div class="propbottom">
        <div class="display-flex align-items-center justify-content-around widget-default padding-t-15 padding-b-15">
            <div class="display-flex flex-column align-items-center" id="leftProp">
                <img class="issue-img" src="../img/farm-video.png" alt="">
                <span class="font-17 blue1">农技视频</span>
            </div>
            <div class="display-flex flex-column align-items-center" id="rightProp">
                <img class="issue-img" src="../img/little-video.png" alt="">
                <span class="font-17 blue1">小视频</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script>
        mui(".mui-scroll-wrapper").scroll({
            scrollX: true,
            indicators: false,
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
        mui("#demo1").progressbar({
            progress: 60
        }).show();
        $("#imgpop").click(function () {
            $(".propbottom").show();
            $("#topProp").show();
        })
        $("#leftProp").click(function () {
            $(".propbottom").hide();
        })
        $("#rightProp").click(function () {
            $(".propbottom").hide();
        })
        $("#topProp").click(function () {
            $(".propbottom").hide();
            $("#topProp").hide();
        })
    </script>
</body>

</html>